<script setup>
import { reactive, ref } from "vue";
import planApplyProjectApi from "@/api/planApplyProjectApi";
import planApi from "@/api/planApi.js";
import JsPdfImg from "@/utils/htmlToPDF";
import QrcodeVue from "qrcode.vue";
import { Message } from "@arco-design/web-vue";
import dayjs from "dayjs";

const searchForm = ref();
const groupSearchForm = ref();
const dynamicsSearchForm = ref();
const historyParams = history.state.params;

let groupSearchModel = ref({
  planId: historyParams.planId,
  groupNo: "",
  showScore: true,
  showLevel: true,
  templateStyle: "normal",
});

let searchModel = ref({
  planId: historyParams.planId,
  studyCode: "",
  cardNo: "",
  showLevel: true,
  idNumber: "",
});

let dynamicsSearchModel = ref({
  planId: historyParams.planId,
  studyCode: "",
  studyCodeList: [],
  showScore: true,
  showLevel: true,
  templateStyle: "normal",
})

const singleRecordData = ref({});
const queryClear = ref(true);
const printVisible = ref(false);
const exporting = ref(false);
const lockingResult = ref(false);
const currentTab = ref(1);
const schoolList = ref([]);
const groupData = ref([]);
const dynamicsData = ref([]);

let dynamicsPagination = reactive({
  total: 0,
  current: 1,
  pageSize: 120,
  showPageSize: true,
  pageSizeOptions: [120, 320, 480, 960],
  showTotal: true,
  pageChange: (current) => {
    dynamicsPagination.current = current;
    searchForDynamicsData();
  },
  pageSizeChange(size) {
    dynamicsPagination.pageSize = size;
    searchForDynamicsData();
  },
});

let pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 120,
  showPageSize: true,
  pageSizeOptions: [120, 320, 480, 960],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    searchForGroupData();
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    searchForGroupData();
  },
});

let printObj = {
  id: "pdfPrintRef",
  preview: false,
  previewTitle: "",
};

const dynamicsColumns = [
  {
    title: "学校名称",
    dataIndex: "schoolName",
    width: 150,
  },
  {
    title: "学生姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "性别",
    slotName: "sex",
    width: 100,
  },

  {
    title: "年级",
    dataIndex: "gradeName",
    width: 100,
  },
  {
    title: "班级",
    dataIndex: "classesName",
    width: 100,
  },
  {
    title: "学籍号",
    dataIndex: "studyCode",
    width: 200,
  },
  {
    title: "检录状态",
    slotName: "recorded",
    width: 100,
  },
  {
    title: "报名项目",
    slotName: "projectNames",
    width: 200,
    ellipsis: true,
    tooltip: true,
    fixed: "right",
  },
  {
    title: "成绩锁定",
    slotName: "locked",
    width: 100,
    fixed: "right",
  },
];

const columns = [
  {
    title: "学校名称",
    dataIndex: "schoolName",
    width: 150,
  },
  {
    title: "学生姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "性别",
    slotName: "sex",
    width: 100,
  },

  {
    title: "年级",
    dataIndex: "gradeName",
    width: 100,
  },
  {
    title: "班级",
    dataIndex: "classesName",
    width: 100,
  },
  {
    title: "学籍号",
    dataIndex: "studyCode",
    width: 200,
  },
  {
    title: "检录状态",
    slotName: "recorded",
    width: 100,
  },
  {
    title: "报名项目",
    slotName: "projectNames",
    width: 200,
    ellipsis: true,
    tooltip: true,
    fixed: "right",
  },
  {
    title: "成绩锁定",
    slotName: "locked",
    width: 100,
    fixed: "right",
  },
];

let singleColumns = ref([
  {
    dataIndex: "prjName",
    title: "项目",
  },
  {
    slotName: "result",
    title: "成绩",
  },
  {
    slotName: "score",
    title: "基础分",
  },
  {
    slotName: "extraScore",
    title: "附加分",
  },
  {
    slotName: "finalScore",
    title: "计算得分",
  },
]);
let singleResultDatas = ref([]);

const scroll = {
  x: 2000,
  y: 700,
};

const changeTab = (key) => {
  currentTab.value = key;
};

const summary = ({ columns, data }) => {
  //   console.log(columns);
  //   let countData = {
  //     finalScore: 0,
  //   };
  //   data.forEach((record) => {
  //     countData.finalScore += record.finalScore;
  //   });

  return [
    {
      prjName: "总分",
      finalScore:
        singleRecordData.value.summaryResult &&
          singleRecordData.value.summaryResult.totalScore
          ? singleRecordData.value.summaryResult.totalScore
          : 0.0,
    },
  ];
};

const spanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return {
      colspan: 4,
    };
  }
};

const lockResult = () => {
  lockingResult.value = true;
  planApplyProjectApi.lockResult(groupSearchModel.value).then((res) => {
    lockingResult.value = false;
    searchForGroupData();
  });
};

const getProjectResultTxt = (record) => {
  let priTexts = [];
  record.testResultList.forEach((testItem) => {
    let statusItemStr = testItem.prjName + "( " + testItem.result;
    if (groupSearchModel.value.showScore) {
      statusItemStr = statusItemStr + " | " + testItem.finalScore + "分 )";
    } else {
      statusItemStr = statusItemStr + " )";
    }

    priTexts.push(statusItemStr);
  });
  return priTexts;
};

const queryTestResult = () => {
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, searchModel.value),
  };
  planApplyProjectApi.queryTestProjectResult(params).then((res) => {
    if (res.records.length > 0) {
      singleRecordData.value = res.records[0];
      singleResultDatas.value = res.records[0].testResultList;
      printObj.title =
        singleRecordData.value.schoolName + "体育考试个人成绩公示";
      printObj.previewTitle =
        singleRecordData.value.schoolName + "体育考试个人成绩公示";
      if (queryClear.value) {
        searchModel.value = {
          planId: historyParams.planId,
          showLevel: searchModel.value.showLevel,
        };
      }
    }
  });
};

const exportPublicity = () => {
  exporting.value = true;
  var params = {
    pageNo: 1,
    pageSize: 100,
    queryParam: Object.assign({}, groupSearchModel.value),
  };
  planApplyProjectApi.exportPublicity(params).then((res) => {
    const content = res.data;
    const blob = new Blob([content], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    window.open(url);
    exporting.value = false;
  });
};

const exportPublicityForDynamics = () => {
  exporting.value = true;
  let studyCodeList = []
  dynamicsData.value.forEach(item => {
    studyCodeList.push(item.studyCode)
  })
  dynamicsSearchModel.value.studyCode = "";
  dynamicsSearchModel.value.studyCodeList = studyCodeList
  var params = {
    pageNo: 1,
    pageSize: 100,
    queryParam: Object.assign({}, dynamicsSearchModel.value),
  };
  planApplyProjectApi.exportPublicity(params).then((res) => {
    const content = res.data;
    const blob = new Blob([content], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    window.open(url);
    exporting.value = false;
  });
};

const downloadToPDF = () => {
  exporting.value = true;
  var fileName = singleRecordData.value.schoolName + "体育考试成绩公示";
  let resArat = new JsPdfImg("#pdfPrintRef", fileName, {
    pageBreak: [".pdfPrintRef"], // 当导出pdf时候，这个参数必填
    pageStartOffset: 0, // 每个页头的留空距离
    watermarkOption: null,
  }).outPdf(
    () => {
      console.log("结束");
      exporting.value = false;
    },
    () => { },
    {
      isSave: true,
      isPrint: true,
    }
  );

  console.log(resArat);
};

const searchForGroupData = () => {
  if (!groupSearchModel.value.groupNo || !groupSearchModel.value.groupNo.trim()) {
    Message.warning('请先输入分组号')
    return;
  }
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, groupSearchModel.value),
  };
  planApplyProjectApi.queryTestProjectResult(params).then((res) => {
    groupData.value = res.records;
  });
};

const searchForDynamicsData = () => {
  if (!dynamicsSearchModel.value.studyCode || !dynamicsSearchModel.value.studyCode.trim()) {
    Message.warning('请先输入学籍号')
    return;
  }
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, dynamicsSearchModel.value),
  };
  planApplyProjectApi.queryTestProjectResult(params).then((res) => {
    if (res.records) {
      res.records.forEach(item => {
        dynamicsData.value.push(item)
      })
    }
  });
}

const expandable = reactive({
  title: "报名项目",
  slotName: "projectNames",
  ellipsis: true,
  tooltip: true,
  fixed: "right",
  width: 150,
  expand: "",
  expandedRowRender: (record) => {
    return getProjectResultTxt(record);
  },
});

const getSchoolList = () => {
  planApi
    .getSchoolList({
      planId: historyParams.planId,
    })
    .then((res) => {
      schoolList.value = res;
    });
};

const reset = () => {
  searchForm.value.resetFields();
};

const resetGroup = () => {
  groupSearchForm.value.resetFields();
};

const resetDynamics = () => {
  dynamicsSearchForm.value.resetFields();
}

const clearData = () => {
  dynamicsData.value = []
}

getSchoolList();
</script>
<template>
  <div class="main-con">
    <div style="padding-bottom: 16px">
      <a-breadcrumb>
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>考试计划</a-breadcrumb-item>
        <a-breadcrumb-item>成绩公示</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-tabs @change="changeTab">
      <a-tab-pane key="1">
        <template #title> <icon-user />个人公示 </template>
        <a-card>
          <a-row>
            <a-col :flex="1">
              <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 6 }"
                :wrapper-col-props="{ span: 18 }" label-align="left">
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item field="studyCode" label="学籍号">
                      <a-input v-model="searchModel.studyCode" @press-enter="queryTestResult" placeholder="请输入学籍号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="idNumber" label="身份证号">
                      <a-input v-model="searchModel.idNumber" @press-enter="queryTestResult" placeholder="请输入身份证号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="cardNo" label="IC卡号">
                      <a-input v-model="searchModel.cardNo" @press-enter="queryTestResult" placeholder="请输入IC卡号" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
              <a-space direction="vertical" :size="18">
                <a-button type="primary" @click="queryTestResult">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-card>
        <a-card style="margin-top: 10px">
          <div class="flex flex-v-center">
            <a-space>
              <a-button type="primary" :disabled="!singleRecordData.studyCode"
                @click="printVisible = true">打印</a-button>
              <a-checkbox v-model="searchModel.showLevel">打印等级</a-checkbox>
              <a-checkbox v-model="queryClear">查询后清空输入项</a-checkbox>
            </a-space>
          </div>
          <a-card title="学生信息" style="margin-top: 16px">
            <div class="flex" style="padding: 10px 0">
              <a-space size="large">
                <a-avatar :size="80">
                  <img v-if="singleRecordData.avatarUrl" alt="avatar" :src="singleRecordData.avatarUrl" />
                  <img v-else src="@/assets/girl-pic@2x-d25a2ddb.png" />
                </a-avatar>
                <qrcode-vue v-if="singleRecordData.studyCode" :value="singleRecordData.studyCode" :size="80"
                  level="H" />
              </a-space>
              <div style="margin-left: 80px">
                <a-descriptions :column="{ xs: 2, md: 2, lg: 2 }">
                  <a-descriptions-item label="学生姓名：">
                    <div class="show-info">
                      {{ singleRecordData.name }}
                      <a-tag v-if="singleRecordData.name" type="primary" color="blue">{{
                        singleRecordData.recorded ? "已检录" : "未检录"
                      }}</a-tag>
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item label="分组号：">
                    <span v-if="singleRecordData.groupNo">{{
                      singleRecordData.groupNo
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学生性别：">
                    <icon-man v-if="singleRecordData.sex == '1'" /><icon-woman
                      v-if="singleRecordData.sex == '2'" /><span v-if="singleRecordData.sex">{{
                        singleRecordData.sex == "1" ? "男" : "女"
                      }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="组内编号：">
                    <span v-if="singleRecordData.groupInNo">{{
                      singleRecordData.groupInNo
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学校名称：">
                    <span v-if="singleRecordData.schoolName">{{
                      singleRecordData.schoolName
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学籍号：">
                    <span v-if="singleRecordData.studyCode">{{
                      singleRecordData.studyCode
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="年级班级：">
                    <span v-if="singleRecordData.gradeName">{{
                      singleRecordData.gradeName +
                      " / " +
                      singleRecordData.classesName
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="身份证号：">
                    <span v-if="singleRecordData.idNumber">{{
                      singleRecordData.idNumber
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </a-card>
          <a-card :title="'考试项目'">
            <a-table size="small" :bordered="{ cell: true }" :summary="summary" :summary-span-method="spanMethod"
              :columns="singleColumns" :data="singleResultDatas" :pagination="false">
              <template #score="{ record }">
                <a-tag :color="!record.score ? 'orange' : 'blue'">{{
                  !record.score && record.score != 0 ? "—" : record.score
                }}</a-tag>
              </template>
              <template #result="{ record }">
                <a-tag :color="!record.score ? 'orange' : 'blue'">{{
                  !record.result ? "—" : record.result
                }}</a-tag>
              </template>
              <template #extraScore="{ record }">
                <a-tag :color="!record.score ? 'orange' : 'blue'">{{
                  !record.extraScore && record.extraScore != 0
                    ? "—"
                    : record.extraScore
                }}</a-tag>
              </template>
              <template #finalScore="{ record }">
                <a-tag :color="!record.score ? 'orange' : 'blue'">{{
                  !record.finalScore && record.finalScore != 0
                    ? "—"
                    : record.finalScore
                }}</a-tag>
              </template>
            </a-table>
          </a-card>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #title> <icon-user-group />集体公示 </template>
        <a-card>
          <a-form ref="groupSearchForm" :model="groupSearchModel" :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }" label-align="left">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item field="schoolId" label="学校">
                  <a-select v-model="groupSearchModel.schoolId" placeholder="请选择学校" allow-clear>
                    <a-option v-for="school in schoolList" :value="school.id" :key="school.id"
                      :label="school.name"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="groupNo" label="分组号">
                  <a-input v-model="groupSearchModel.groupNo" @press-enter="searchForGroupData"
                    placeholder="请输入分组号"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-space>
                  <a-button type="primary" @click="searchForGroupData">查询</a-button>
                  <a-button @reset="resetGroup">重置</a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <a-card style="margin-top: 10px">
          <div class="toolbar">
            <div class="flex flex-v-center">
              <a-space>
                <a-button :loading="exporting" type="primary" :disabled="!groupSearchModel.groupNo"
                  @click="exportPublicity" size="small">打印</a-button>
                <a-checkbox v-model="groupSearchModel.showLevel">打印等级</a-checkbox>
                <a-radio-group type="button" v-model="groupSearchModel.templateStyle">
                  <a-radio value="normal">统一报项打印</a-radio>
                  <a-radio value="custom">非统一报项打印</a-radio>
                </a-radio-group>
                <a-checkbox v-model="groupSearchModel.showScore">显示评分</a-checkbox>
                <a-popconfirm content="确认锁定成绩，锁定后成绩将无法修改吗？" @ok="lockResult">
                  <a-button :loading="lockingResult" type="outline" :disabled="!groupSearchModel.groupNo" size="small">
                    <template #icon><icon-lock /></template>
                    锁定成绩</a-button>
                </a-popconfirm>
              </a-space>
            </div>
          </div>
          <a-table :columns="columns" :data="groupData" :scroll="scroll">
            <template #sex="{ record }">
              {{ record.sex == "1" ? "男" : " 女" }}
            </template>
            <template #locked="{ record }">
              <a-tag type="primary" :color="record.locked ? 'blue' : 'orange'">{{ record.locked ? "已锁定" : "未锁定"
                }}</a-tag>
            </template>
            <template #recorded="{ record }">
              <a-tag type="primary" :color="record.recorded ? 'blue' : 'orange'">
                {{ record.recorded ? "已检录" : " 未检录" }}</a-tag>
            </template>
            <template #projectNames="{ record }">
              <a-row :gutter="5">
                <a-col :span="24" v-for="(tag, index) in getProjectResultTxt(record)" :key="index"
                  style="margin: 2px 0">
                  <a-tag :color="tag.includes('—') ? '#86909c' : 'blue'" size="mini">
                    {{ tag }}
                  </a-tag>
                </a-col>
              </a-row>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #title> <icon-user-group />动态公示 </template>
        <a-card>
          <a-form ref="dynamicsSearchForm" :model="dynamicsSearchModel" :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }" label-align="left">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item field="studyCode" label="学籍号">
                  <a-input v-model="dynamicsSearchModel.studyCode" @press-enter="searchForDynamicsData"
                    placeholder="请输入学籍号"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-space>
                  <a-button type="primary" @click="searchForDynamicsData">查询并添加</a-button>
                  <a-button @click="resetDynamics">重置</a-button>
                  <a-button @click="clearData">清空当前列表</a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <a-card style="margin-top: 10px">
          <div class="toolbar">
            <div class="flex flex-v-center">
              <a-space>
                <a-button :loading="exporting" type="primary" :disabled="!dynamicsData || dynamicsData.length == 0"
                  @click="exportPublicityForDynamics" size="small">打印</a-button>
                <a-checkbox v-model="dynamicsSearchModel.showLevel">打印等级</a-checkbox>
                <a-radio-group type="button" v-model="dynamicsSearchModel.templateStyle">
                  <a-radio value="normal">统一报项打印</a-radio>
                  <a-radio value="custom">非统一报项打印</a-radio>
                </a-radio-group>
                <a-checkbox v-model="dynamicsSearchModel.showScore">显示评分</a-checkbox>
                <a-popconfirm content="确认锁定成绩，锁定后成绩将无法修改吗？" @ok="lockResult">
                  <a-button :loading="lockingResult" type="outline"
                    :disabled="!dynamicsData || dynamicsData.length == 0" size="small">
                    <template #icon><icon-lock /></template>
                    锁定成绩</a-button>
                </a-popconfirm>
              </a-space>
            </div>
          </div>
          <a-table :columns="dynamicsColumns" :data="dynamicsData" :scroll="scroll">
            <template #sex="{ record }">
              {{ record.sex == "1" ? "男" : " 女" }}
            </template>
            <template #locked="{ record }">
              <a-tag type="primary" :color="record.locked ? 'blue' : 'orange'">{{ record.locked ? "已锁定" : "未锁定"
                }}</a-tag>
            </template>
            <template #recorded="{ record }">
              <a-tag type="primary" :color="record.recorded ? 'blue' : 'orange'">
                {{ record.recorded ? "已检录" : " 未检录" }}</a-tag>
            </template>
            <template #projectNames="{ record }">
              <a-row :gutter="5">
                <a-col :span="24" v-for="(tag, index) in getProjectResultTxt(record)" :key="index"
                  style="margin: 2px 0">
                  <a-tag :color="tag.includes('—') ? '#86909c' : 'blue'" size="mini">
                    {{ tag }}
                  </a-tag>
                </a-col>
              </a-row>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
  <a-modal title="打印公示成绩" v-model:visible="printVisible" width="230mm" :footer="null">
    <div class="pages" id="pdfPrintRef">
      <div :class="['pdfPrintRef']" :id="'group' + singleRecordData.groupNo">
        <h1 class="title page-header">
          {{ singleRecordData.schoolName }}体育中考个人成绩公示
        </h1>
        <div class="flex flex-v-center">
          <div class="flex1">
            <table style="width: 100%; border: 1px solid #e5e5e5">
              <tbody>
                <tr class="group-info">
                  <td class="td rb">姓名</td>
                  <td class="td rb fw">{{ singleRecordData.name }}</td>
                  <td class="td rb">总分</td>
                  <td class="td fw">
                    {{
                      singleRecordData.summaryResult &&
                      singleRecordData.summaryResult.totalScore
                    }}
                  </td>
                </tr>
                <tr class="group-info">
                  <td class="td rb">性别</td>
                  <td class="td rb fw">
                    {{ singleRecordData.sex == "1" ? "男" : "女" }}
                  </td>
                  <td class="td rb">学校名称</td>
                  <td class="td rb fw">{{ singleRecordData.schoolName }}</td>
                </tr>
                <tr class="group-info">
                  <td class="td rb">分组编号</td>
                  <td class="td rb fw">
                    {{
                      singleRecordData.groupNo ? singleRecordData.groupNo : ""
                    }}
                  </td>
                  <td class="td rb">组内编号</td>
                  <td class="td fw">{{ singleRecordData.groupInNo }}</td>
                </tr>
                <tr>
                  <td class="td rb">年级班级</td>
                  <td class="td rb fw">
                    {{
                      singleRecordData.gradeName +
                      " / " +
                      singleRecordData.classesName
                    }}
                  </td>
                  <td class="td rb">学籍号</td>
                  <td class="td fw">{{ singleRecordData.studyCode }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="qrcode">
            <qrcode-vue :value="singleRecordData.studyCode + ''" :size="80" level="H" />
          </div>
        </div>
        <div class="student-con">
          <table style="width: 100%; border: 1px solid #e5e5e5">
            <tbody>
              <tr class="group-info">
                <td class="td rb fw">项目</td>
                <td class="td rb fw">成绩</td>
                <td class="td rb fw">得分</td>
                <td v-if="searchModel.showLevel" class="td rb fw">等级</td>
              </tr>
              <tr v-for="std in singleResultDatas" :key="std.studyCode" class="group-info">
                <td class="td rb">{{ std.prjName }}</td>
                <td class="td rb">{{ std.result }}</td>
                <td class="td rb">{{ std.score }}</td>
                <td v-if="searchModel.showLevel" class="td rb">
                  {{ std.level }}
                </td>
              </tr>
              <tr class="group-info">
                <td class="td rb fw">考生签字</td>
                <td class="td rb fw" colspan="3"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div style="padding: 20px; text-align: center">
      <a-space>
        <button class="arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal"
          v-print="printObj">
          打印
        </button>
        <a-button @click="printVisible = false">关闭</a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<style scoped>
.show-info {
  display: inline-block;
  width: 150px;
}

@page {
  size: auto;
  margin: 0mm;
}

.pages {
  width: 210mm;
  text-align: center;
  margin: 0 auto;
}

.pdfPrintRef {
  border-bottom: 1px solid #e5e5e5;
  padding: 16px;
  background-color: #fff;
}

.pdfPrintRef .title {
  text-align: center;
  font-weight: 600;
  color: #000;
  padding: 16px 0;
  font-size: 16px;
}

.pdfPrintRef .group-info {
  border-bottom: 1px solid #e5e5e5;
}

.student-con {
  margin-top: 16px;
}

.rb {
  border-right: 1px solid #e5e5e5;
}

.td {
  padding: 16px 0;
  text-align: center;
  width: 100px;
  vertical-align: middle;
  color: #000;
}

.fw {
  font-weight: 600;
}

.qrcode {
  text-align: center;
  padding: 10px;
}
</style>
